<script setup lang="ts">
import { ref } from 'vue';
import TaskForm from './components/TaskForm.vue';
import TaskList from './components/TaskList.vue';

const tasks = ref<string[]>([]);

// const addTask = (task: string) => {
//     tasks.value.push(task);
// };
const submitSingleTask = ref<string>("");

const mergeRecords = () => {
    if (tasks.value.length > 0) {
        const mergedRecord = tasks.value.join('\n');
        alert(`合并记录:\n${mergedRecord}`);
        // 在这里你可以将 mergedRecord 发送到后端进行存储
        // 你还需要在后端实现存储和管理记录的逻辑
    } else {
        alert('没有要合并的记录');
    }
};

// 父组件调用子组件的方法
const callChildMethod = () => {
    console.log("1234")

    console.log(submitSingleTask)
    // if (submitSingleTask?.value) {

    // console.log("123")
    // addTask(submitSingleTask?.value)
    // }
};
</script>
<template>
    <a-layout style="min-height: 100%">

        <a-layout-header class="record_header_style" style="background: #fff; padding: 0">
            <div class="record_box_style">
                <h1 class="record_title_style">随心记</h1>

                <div class="record_box_style">
                    <a-button class="record_header_button_style" @click="mergeRecords" type="primary"
                        style="margin-top: 16px">
                        合并
                    </a-button>
                    <a-button class="record_header_button_right_style" @click="callChildMethod" type="primary"
                        style="margin-top: 16px">
                        手动记录
                    </a-button>
                </div>

            </div>
        </a-layout-header>
        <a-layout-content style="margin: 16px">
            <task-form @submitSingleTask="submitSingleTask" />
            <task-list :tasks="tasks" />
        </a-layout-content>
    </a-layout>
</template>


<style lang="scss" scoped>
/* Add your custom styles here */

.record_header_style {

    height: 55px;

    .record_box_style {
        display: flex;
        justify-content: space-between;

        .record_title_style {
            font-size: 20px;
            font-family: 'fongsong';
            text-align: left;
            padding: 0px 0px 0px 20px;

        }

        .record_header_button_style {
            width: 50px;
            overflow: hidden;
            background-color: #69abfb;
            margin: 0px 10px;
            padding: 0px;

            &:hover {
                background-color: #3c8ff4;

            }

        }

        .record_header_button_right_style {
            width: 60px;
            padding: 0px;
            background-color: #69abfb;
            margin: 0px 10px;

            &:hover {
                background-color: #3c8ff4;

            }
        }


    }
}
</style>